<template>
  <up-cell-group :border="false" customStyle="background:#fff">
    <up-cell title="用户头像" :border="false" :clickable="false" isLink>
      <template #value>
        <u-image :src="prefixURL(form.avatar)" @click="changeImg" width="96rpx" height="96rpx" shape="circle"></u-image>
      </template>
    </up-cell>
  </up-cell-group>
  <up-cell-group :border="false" customStyle="background:#fff;margin-top:20rpx">
    <up-cell title="用户名称" :border="false">
      <template #value>
        <u-input input-align="right" border="none" v-model="form.nickname"></u-input>
      </template>
    </up-cell>
  </up-cell-group>
  <up-cell-group :border="false" customStyle="background:#fff;margin-top:20rpx">
    <up-cell title="手机号" :border="false">
      <template #value>
        <u-input input-align="right" border="none" readonly v-model="userInfo.mobile"></u-input>
      </template>
    </up-cell>
  </up-cell-group>
  <view class="action-btn" @click="_profile">保存</view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  import { _upload, getCache, prefixURL } from '../../util/util';
  import { profile } from '../../config/api';
  const userInfo = ref({})
  userInfo.value = getCache('userInfo')
  const form = ref({
    nickname: userInfo.value.nickname,
    avatar: userInfo.value.avatar
  })
  const changeImg = () => {
    uni.chooseImage({
      count: 1,
      success: async (e) => {
        let url = await _upload(e.tempFilePaths[0])
        form.value.avatar = url
      }
    })
  }
  const _profile = () => {
    profile(form.value).then(res => {
      uni.$u.toast(res.msg)
    })
  }
</script>

<style lang="scss" scoped>
  .action-btn {
    background: #F87610;
    border-radius: 50rpx;
    text-align: center;
    line-height: 90rpx;
    font-size: 30rpx;
    color: #fff;
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    left: 30rpx;
    right: 30rpx;
  }
</style>